<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <!-- 
        css3弹性盒模型 flex flexbox 伸缩布局盒模型

        给伸缩容器 添加display:flex;
            float clear (vercital-align)无效
            注意：display:flex不能继承，只能添加在父元素上
        
     -->
     <style>
         .all{
             width: 100%; height:260px;
             background:#ccc;
             display: flex;
             display: -webkit-flex;
             display: -moz-flex;
             display: -o-flex;
             display: -ms-flex;
         }
         .all div{
           width:33.33%;  
           height:200px;
           /* float: left; */
         }
         .all>div:nth-child(1){
             background-color: red;
         }
         .all>div:nth-child(2){
             background-color: green;
         }
         .all>div:nth-child(3){
             background-color: blue;
         }
     </style>
</head>
<body>
    <div class="all">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>